<template>
  <view :class="theme" style="padding-bottom: var(--window-bottom);">
    <view class="mt-30 mb-120">
      <view @click="checkedItem(index)" v-for="(item, index) in cards.list" :key="index" style="margin: 0 30rpx 30rpx"
        class="justify-between p-30 bg-section b-rounded-16 flex-row items-center">
        <text class="text-28 color-base">银行卡号：{{ item.card_no }}</text>
        <view v-if="cards.addTypeCards == '1'" class="p-20 bg-label">
          选择
        </view>
      </view>

      <view class="mt-30 mb-30 items-center">
        <uv-image v-if="!cards.list.length" :showLoading="false" width="350" height="210" class="mt-60 mb-30"
          src="/static/img/blank.png" mode="aspectFit" />
        <uv-load-more :status="cards.status" :is-dot="!!cards.list.length" />
      </view>
    </view>

    <view class="fixed content-box bottom-0 flex-row h-120 items-center"
      style="border-top: #000 1px solid; padding-bottom: var(--window-bottom); box-sizing: content-box; left: var(--window-left); right: var(--window-right); background-color: rgba(43, 43, 43, 0.9); backdrop-filter: blur(24rpx); z-index: 99;">
      <button @click="addCard" hover-class="op-[0.6]" style="line-height: 90rpx; margin: 0 30rpx;"
        class="flex-1 bg-primary b-rounded-16 color-base text-center text-32">
        添加银行卡
      </button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { uniNavigator } from "@/common/libs/utils";
import { onShow, onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import { useStore } from "vuex";

const { theme } = useMapState(["theme"]);
const cards = reactive({
  list: [] as AnyObject[],
  status: "nomore",
  addTypeCards: "",
});
const store = useStore();
const listType = ref<"withdrawal" | "recharge">("withdrawal");

let enabledSelectCard = false;
onLoad(({ enabled_select_card = 0, type = "withdrawal", addCard }: any) => {
  cards.addTypeCards = addCard;
  enabledSelectCard = !!+enabled_select_card;
  listType.value = type;
});

onShow(() => {
  getData();
});

onPullDownRefresh(() => {
  getData();
});

const addCard = () => {
  if (listType.value === "withdrawal") {
    uni.navigateTo({ url: "/pages/client/mall/addCard" });
    return;
  }
  uni.request({
    url: "/bondingCard",
    success({ data }: any) {
      if (!data.url) {
        uni.showToast({ title: "地址获取失败", icon: "none" });
        return;
      }
      uniNavigator({ url: data.url });
    },
  });
};

const getData = () => {
  cards.status = "loading";
  uni.request({
    url: "/userBank",
    success({ data }: any) {
      cards.list = data.list || [];
      cards.status = "nomore";
    },
  });
};

const checkedItem = (index: number) => {
  if (!enabledSelectCard) return;
  store.commit("setState", { key: "card", value: cards.list[index] });
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
// scss
</style>
